<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- 
      v-on:绑定事件
        * 绑定事件的基础使用
          - 可以用 v-on 指令监听 DOM 事件，并接受一个函数作为事件函数
          - 事件函数书写在methods配置项中(Vue保证你可以在函数中this指向vue实例,从而拿到数据)
        * 事件函数的传参
          - 在绑定事件的时候,直接给事件函数传递参数
          - 在methods中定义的事件函数直接书写形参接受参数
          - 不需要书写高阶函数处理参数的情况(vue内部已经帮我们处理完成)
        * event事件对象
          - 如果调用事件函数没有传参(没有加小括号),则事件函数中的第一个参数就是event事件对象,直接接受即可
          - 在v-on指令后的插值语法中默认存在一个$event的数据,代表当前的event事件对象,如果事件函数需要显示传参,我们就可以找一个位置把$event显式传递进去
        * 简写:
          - `v-on:`指令可以直接简写为@
          - 如果事件函数内部的逻辑简单,并且只是操作数据,则可以直接在v-on后的插值语法中书写逻辑,不需要书写函数
        * 事件修饰符
          - prevent:阻止默认事件
          - stop:阻止传播
          - capture:默认绑定的事件都是在冒泡阶段执行,添加capture修饰符可以设置捕获阶段执行
          - self:只有事件的e.target是当前元素的时候才会触发当前元素上的事件
          - once:当前事件只能执行一次
          - 键盘修饰符:比如按键为回车键才触发的：@keyup.13="keyup" 或者 @keyup.enter="keyup"
     -->
    <div id="app">
      <h1>count:{{count}}</h1>
      <h1>num:{{num}}</h1>

      <form action="https://www.baidu.com">
        <button @click.prevent="formSub">按钮</button>
      </form>
      <div @click.capture.stop="fn1">
        outer
        <div @click="fn2">
          inner
          <div @click.stop="fn3">box</div>
        </div>
      </div>

      <div @click.self="fn1">
        outer1
        <div @click.self="fn2">
          inner2
          <div @click="fn3">box3</div>
        </div>
      </div>
      <button @click="fn1">一次性事件</button>
      <hr />
      <input type="text" @keyup.13="fn1" placeholder="只有敲回车键才能触发" />
      <input
        type="text"
        @keyup.enter="fn1"
        placeholder="只有敲回车键才能触发"
      />
      <input type="text" @keyup.space="fn1" placeholder="只有敲空格才能触发" />
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 1,
            num: 1,
          };
        },
        methods: {
          formSub() {
            console.log("表单提交");
          },
          fn1() {
            console.log("fn1");
          },
          fn2() {
            console.log("fn2");
          },
          fn3(e) {
            console.log("fn3");
            // e.stopPropagation();
          },
        },
      });
    </script>
  </body>
</html>
